<template>
  <d2-container>
    <div class="pt-3">
      <el-form :model="form" label-width="100px" ref="form">
        <div style="width: 45%;" class="mt-3">
          <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" placeholder="标题"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="分类" prop="user">
          <div style="width: 50%;">
            <el-select v-model="form.category" placeholder="请选择">
              <el-option v-for="item in categoriesList" :key="item.id" :label="item.category_name"
                :value="item.id"></el-option>
            </el-select>
          </div>
        </el-form-item>
        <div style="width: 45%;" class="mt-3">
          <el-form-item label="标签" prop="tags">
            <el-input v-model="form.tags" placeholder="多个标签用英文,号隔开"></el-input>
          </el-form-item>
        </div>
        <el-form-item label="用户" prop="user">
          <el-select v-model="form.user" clearable filterable remote :remote-method="searchUsers"
            placeholder="用户名/用户手机/昵称搜索">
            <el-option v-for="item1 in userList" :key="item1.id" :label="item1.username" :value="item1.id">
            </el-option>
          </el-select>
        </el-form-item>
        <div style="width: 80%;">
          <el-form-item label="相册" prop="pictrues">
            <el-upload :action="actionUrl" list-type="picture-card" :on-remove="handleRemove"
              :on-success="handleSuccess" :file-list="form.pictrues">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </div>
        <div style="width: 80%;" class="mt-3">
          <el-form-item label="视频" prop="video">
            <el-input v-model="form.video" placeholder="视频"></el-input>
          </el-form-item>
        </div>
        <div style="width: 80%;">
          <el-form-item>
            <el-button type="primary" @click="submitForm">保存并提交</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </d2-container>
</template>

<script>
  import {
    recordDetailUrl,
    recordCreateUrl,
    recordUpdateUrl,
    recordcategoryListUrl,
  } from '@/utils/socialize'
  import {
    imagesUploadUrl,
    userListUrl
  } from '@/utils/interface'
  import {
    baseURL
  } from '@/utils/request'
  export default {
    data() {
      return {
        addRecordStatus: true,
        form: {
          title: '',
          tags: '',
          pictrues: [],
          video: null,
          user: '',
          category: ''
        },
        queryInfoUser: {
          search: ''
        },
        userList: [],
        categoriesList: [],
        imageList: [],
        actionUrl: baseURL + imagesUploadUrl,
      }
    },
    mounted() {
      if (this.$route.query.recordId) {
        this.addRecordStatus = false
        this.getRecordId = this.$route.query.recordId
        this.getRecordDetail()
      } else {
        this.addRecordStatus = true
      }
    },
    created() {
      this.getCategoriesList()
      this.getUserList()
    },
    methods: {
      searchUsers(query) {
        this.getUserList(query)
      },
      getUserList(query) {
        this.queryInfoUser.search = query;
        this.$get(userListUrl, this.queryInfoUser).then(res => {
          if (res.data.code == 200) {
            this.userList = res.data.data.list
          }
        })
      },
      getCategoriesList() {
        this.$get(recordcategoryListUrl, this.queryInfo).then(res => {
          this.categoriesList = res.data.data.list
        })
      },
      getRecordDetail() {
        this.$get(recordDetailUrl + this.getRecordId + '/').then(res => {
          if (res.data.code == 200) {
            this.form = {
              title: res.data.data.title,
              tags: res.data.data.tags,
              pictrues: res.data.data.pictrues,
              video: res.data.data.video,
              user: res.data.data.user,
              category: res.data.data.category
            }
          }
        })
      },
      handleSuccess(response, file) {
        this.imageList.push({
          url: response.data.url
        })
        this.form.pictrues = this.imageList
      },
      handleRemove(file, fileList) {
        const index = this.form.pictrues.findIndex((item) => item.url === file.url);
        if (index !== -1) {
          this.form.pictrues.splice(index, 1);
        } else if (this.form.pictrues.length > 0) {
          this.form.pictrues.pop();
        }
      },
      submitForm() {
        let formData = new FormData()
        formData.append('title', this.form.title)
        formData.append('tags', this.form.tags)
        formData.append('category', this.form.category)
        formData.append('user', this.form.user)
        formData.append('pictrues', JSON.stringify(this.form.pictrues))
        formData.append('video', JSON.stringify(this.form.video))
        if (this.addRecordStatus == true) {
          this.$post(recordCreateUrl, formData).then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: '添加成功',
                type: 'success'
              });
              setTimeout(() => {
                this.$router.go(-1)
              }, 300) // 延迟1秒执行
            }
          })
        } else {
          this.$put(recordUpdateUrl + this.getRecordId + '/', formData).then(res => {
            if (res.data.code == 200) {
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              setTimeout(() => {
                this.$router.go(-1)
              }, 300) // 延迟1秒执行
            }
          })
        }
      }
    }
  }
</script>

<style>
</style>